<template>
    <div>
        <h1 @click="myclick">弹窗标题xxx</h1>
        <div style="width:400px">
        <div class="el-table">
            <table class="el-table__header" cellspacing="0" cellpadding="0" border="0">
                <thead>
                    <tr>
                        <th colspan="1" rowspan="1" class="el-table__cell">
                            <div class="cell">姓名</div>
                        </th>
                        <th colspan="1" rowspan="1" class="el-table__cell">
                            <div class="cell">住址</div>
                        </th>
                        <th colspan="1" rowspan="1" class="el-table__cell">
                            <div class="cell">电话</div>
                        </th>
                        <th colspan="1" rowspan="1" class="el-table__cell">
                            <div class="cell">未知</div>
                        </th>
                    </tr>
                </thead>
            </table>
            <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td>
                            <div class="cell">Gao</div>
                        </td>
                        <td>
                            <div class="cell">杭州</div>
                        </td>
                        <td>
                            <div class="cell">1234</div>
                        </td>
                        <td>
                            <div class="cell">haha</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="cell">JiHa</div>
                        </td>
                        <td>
                            <div class="cell">浙江</div>
                        </td>
                        <td>
                            <div class="cell">1234</div>
                        </td>
                        <td>
                            <div class="cell">ddd</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </div>
    </div>

</template>
<script>
import ACom from "./A.vue"
export default {
    data() {
        return {
            mes: false
        }
    },
    methods: {
        myclick() {
            this.$modal({
                template: ACom
            })
        },
        log() {
            console.log("foucus")
        }
    }
}
</script>

<style scoped lang="scss">
.el-table {
    font-size: 14px;
    color: #606266;
    border: 1px solid skyblue;
    border-right: none;
    border-bottom: none;
    
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    font-size: 14px;

    &::before {
        content: "";
        position: absolute;
        background-color: skyblue;
        z-index: 1;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
    }

    .el-table__header {
        table-layout: fixed;
        border-collapse: separate;
        background: grey;
        width: 100%;

        thead {
            height: 40px;
            font-weight: 500;
            color: #000;

            th {
                border-right: 1px solid skyblue;

                .cell {
                    display: inline-block;
                    box-sizing: border-box;
                    position: relative;
                    vertical-align: middle;
                    padding-left: 10px;
                    padding-right: 10px;
                    width: 100%;
                }
            }
        }
    }

    .el-table__body {
        table-layout: fixed;
        border-collapse: separate;
        width: 100%;

        tbody {
            td {
                border-right: 1px solid skyblue;

                .cell {
                    display: inline-block;
                    box-sizing: border-box;
                    position: relative;
                    vertical-align: middle;
                    padding-left: 10px;
                    padding-right: 10px;
                    width: 100%;
                }
            }
        }
    }
}

.el-table__cell {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}
</style>